<template>
  <div>
    <!-- 这是服务介绍的富文本编辑器，只能用在定价管理 -->
    <div class="tinymce">
      <editor id="mytinymce" v-model="textContent" :init="init"></editor>
      <Upload
        uploadType="serviceDetailImg"
        multiple
        ref="imageUpload"
        :action="uploadUrl"
        :on-success="insertImage"
        style="display:none"
        :headers="headers"
      ></Upload>
    </div>

  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
// import 'tinymce/themes/modern/theme'
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/icons/default/icons";
// 图片上传

import upload from "_c/upload/upload.vue";
import { getImgUrl, getUploadUrl } from "@/api/server-url";
import { getToken, getCompanyId, getUserId } from "@/libs/util";
export default {
  props: {
    editorContent: {
      type: String,
      default: ""
    },
    // 默认是服务介绍的图片
    uploadImgFileType: {
      type: String,
      default: "serviceIntroduceImg"
    }
  },
  data() {
    return {
      uploadUrl: '',
      textContent: this.editorContent,
      // init: {
      //   language_url: `/tinymce/skins/zh_CN.js`,
      //   selector: "#mytinymce",
      //   language: "zh_CN",
      //   skin_url: "/tinymce/skins/ui/oxide",
      //   height: 300,
      //   // menubar: false,
      //   branding: false,
      //   plugins:
      //     "link lists code table colorpicker textcolor wordcount contextmenu", 
      //   toolbar:
      //     "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo ",
      //   setup: editor => {
      //     editor.ui.registry.addButton("imageUpload", {
      //       tooltip: "插入图片",
      //       icon: "image",
      //       onAction: () => {
      //         let upload = this.$refs.imageUpload;
      //         upload.handleClick();
      //       }
      //     });
      //   }
      // },
      init: {
        language_url: `/tinymce/skins/zh_CN.js`,
        selector: "#mytinymce",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        height: 300,
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat imageUpload",
        setup: editor => {
          editor.ui.registry.addButton("imageUpload", {
            tooltip: "插入图片",
            icon: "image",
            onAction: () => {
              let upload = this.$refs.imageUpload;
              upload.handleClick();
            }
          });
        },
        branding: false
      },
      headers: {
        yjyToken: getToken(),
        yjyCompanyId: getCompanyId(),
        yjyUserId: getUserId()
      },
    };
  },
  methods: {
    // 插入图片至编辑器
    insertImage(res, file) {
      let src = getImgUrl(res.data.name); // 图片存储地址
      tinymce.execCommand("mceInsertContent", false, `<img src=${src}>`);
    },
  },
  mounted() {
    tinymce.init({});
    this.uploadUrl = getUploadUrl(this.uploadImgFileType);
    console.log('服务介绍啊==========',this.editorContent);
  },
  watch: {
    textContent: function(val1, val2) {
      this.$emit("getEditorContent", val1);
    },
    editorContent: function(val1) {
      this.textContent = val1;
    }
  },
  components: {
    Editor
  }
};
</script>

<style scoped lang='less'>
</style>